<template>
  <div class="dynamic-background">
    <div
      v-for="(circle, index) in circles"
      :key="index"
      class="circle"
      :style="circle.style"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

interface Circle {
  style: Record<string, string>;
}

const circles = ref<Circle[]>([]);

const generateRandomCircles = () => {
  const count = 20; // Number of circles
  const newCircles: Circle[] = [];
  for (let i = 0; i < count; i++) {
    const size = Math.random() * 100 + 20 + "px";
    newCircles.push({
      style: {
        width: size,
        height: size,
        top: Math.random() * 100 + "%",
        left: Math.random() * 100 + "%",
        animationDelay: Math.random() * 5 + "s",
        animationDuration: Math.random() * 10 + 5 + "s",
      },
    });
  }
  circles.value = newCircles;
};

onMounted(() => {
  generateRandomCircles();
});
</script>

<style lang="scss" scoped>
.dynamic-background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(120deg, #89f7fe, #66a6ff);
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: float infinite ease-in-out;

  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }
}
</style>
